{% extends "check/checkindex.html" %}

{% block detail %}


<div class="row">
    {#内容#}
    <div class="col-lg-6">
        <div class="panel panel-info" style="box-shadow: #c6c6c6 0px 0px 5px 5px;background-color: rgba(255,255,255,0.9)">
            <div class="panel-heading">各公司考勤信息汇总</div>
            <div class="panel-body" style="height: 300px;">
                <row class="data-table">
                    <table class="table table-bordered table-hover">
                        <tr>

                            <th class="warning">公司名称</th>
                            <th class="info">平均加班时长</th>
                            <th class="success">迟到次数</th>
                            <th class="success">早退次数</th>
                            <th class="danger">旷工天数</th>
                            <th class="danger">合计休假天数</th>
                        </tr>

                        {% for item in value %}
                        <tr>

                            <th>{{ item.company }}</th>
                            <th>{{ item.overtime }}小时</th>
                            <th>{{ item.late }}次</th>
                            <th>{{ item.leave }}次</th>
                            <th>{{ item.absent }}次</th>
                            <th>{{ item.sumvacation }}天</th>


                        </tr>
                        {% endfor %}


                    </table>
                </row>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="panel panel-info" style="box-shadow: #c6c6c6 0px 0px 5px 5px;background-color: rgba(255,255,255,0.9)">
            <div class="panel-heading">各公司考勤异常统计</div>
            <div class="panel-body" style="height: 300px;">
                <div id="check_total_fs" style="width:100%; height:300px;">

                    <script>
                        $(function () {
                                var hoststr = window.location.host
                                var chart = echarts.init(document.getElementById('check_total_fs'), 'white', {renderer: 'canvas'});
                                var url = "http://" + hoststr + "/check/api_check_total_fs?date=" + "{{ datestr }}";
                                $.ajax({
                                    type: "GET",
                                    url: url,
                                    dataType: 'json',
                                    success: function (result) {
                                        chart.setOption(result);
                                    }
                                });
                            }
                        )
                    </script>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-info" style="box-shadow: #c6c6c6 0px 0px 5px 5px;background-color: rgba(255,255,255,0.9)">
            <div class="panel-heading">各公司加班时长统计</div>
            <div class="panel-body" style="height: 300px;">

                <div class="row">
                    <div class="col-lg-4">
                        <div id="check_total_jb" style="width:100%; height:300px;">

                            <script>
                                $(function () {
                                        var hoststr = window.location.host
                                        var chart = echarts.init(document.getElementById('check_total_jb'), 'white', {renderer: 'canvas'});
                                        var url = "http://" + hoststr + "/check/api_check_total_jb?date=" + "{{ datestr }}";
                                        $.ajax({
                                            type: "GET",
                                            url: url,
                                            dataType: 'json',
                                            success: function (result) {
                                                chart.setOption(result);
                                            }
                                        });
                                    }
                                )
                            </script>

                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div id="check_total_yc" style="width:100%; height:300px;">

                            <script>
                                $(function () {
                                        var hoststr = window.location.host
                                        var chart = echarts.init(document.getElementById('check_total_yc'), 'white', {renderer: 'canvas'});
                                        var url = "http://" + hoststr + "/check/api_check_total_yc?date=" + "{{ datestr }}";
                                        $.ajax({
                                            type: "GET",
                                            url: url,
                                            dataType: 'json',
                                            success: function (result) {
                                                chart.setOption(result);
                                            }
                                        });
                                    }
                                )
                            </script>

                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div id="check_total_cq" style="width:100%; height:300px;">

                            <script>
                                $(function () {
                                        var hoststr = window.location.host
                                        var chart = echarts.init(document.getElementById('check_total_cq'), 'white', {renderer: 'canvas'});
                                        var url = "http://" + hoststr + "/check/api_check_total_cq?date=" + "{{ datestr }}";
                                        $.ajax({
                                            type: "GET",
                                            url: url,
                                            dataType: 'json',
                                            success: function (result) {
                                                chart.setOption(result);
                                            }
                                        });
                                    }
                                )
                            </script>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--    <div class="col-lg-4">-->
    <!--        <div class="panel panel-default" style="box-shadow: #c6c6c6 0px 0px 5px 5px">-->
    <!--            <div class="panel-heading">各公司考勤异常统计</div>-->
    <!--            <div class="panel-body" style="height: 280px;">-->

    <!--                <div id="check_total_yc" style="width:100%; height:280px;">-->

    <!--                    <script>-->
    <!--                        $(function () {-->
    <!--                                var hoststr = window.location.host-->
    <!--                                var chart = echarts.init(document.getElementById('check_total_yc'), 'white', {renderer: 'canvas'});-->
    <!--                                var url = "http://" + hoststr + "/check/api_check_total_yc?date=" + "{{ datestr }}";-->
    <!--                                $.ajax({-->
    <!--                                    type: "GET",-->
    <!--                                    url: url,-->
    <!--                                    dataType: 'json',-->
    <!--                                    success: function (result) {-->
    <!--                                        chart.setOption(result);-->
    <!--                                    }-->
    <!--                                });-->
    <!--                            }-->
    <!--                        )-->
    <!--                    </script>-->

    <!--                </div>-->


    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--    <div class="col-lg-4">-->
    <!--        <div class="panel panel-default" style="box-shadow: #c6c6c6 0px 0px 5px 5px">-->
    <!--            <div class="panel-heading">各公司出勤情况统计</div>-->
    <!--            <div class="panel-body" style="height: 280px;">-->

    <!--                <div id="check_total_cq" style="width:100%; height:280px;">-->

    <!--                    <script>-->
    <!--                        $(function () {-->
    <!--                                var hoststr = window.location.host-->
    <!--                                var chart = echarts.init(document.getElementById('check_total_cq'), 'white', {renderer: 'canvas'});-->
    <!--                                var url = "http://" + hoststr + "/check/api_check_total_cq?date=" + "{{ datestr }}";-->
    <!--                                $.ajax({-->
    <!--                                    type: "GET",-->
    <!--                                    url: url,-->
    <!--                                    dataType: 'json',-->
    <!--                                    success: function (result) {-->
    <!--                                        chart.setOption(result);-->
    <!--                                    }-->
    <!--                                });-->
    <!--                            }-->
    <!--                        )-->
    <!--                    </script>-->

    <!--                </div>-->


    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
</div>


{% endblock %}